import React, { useEffect, useCallback } from 'react'
import { connect } from 'react-redux'
import { getCommonAllPlansSelector, getProgressActivePlanSelector, getProgressForceReloadLogsSelector } from '../../selectors/baseSelector'
import { genProgressSetActivePlan, genProgressSetActivePlanLogStat, genProgressForceReloadActiveSuiteLogs, genProgressSetActivePlanSuites } from '../../actions/home'
import { SingleSelectableList } from '../layout/singleSelectableList'
import { EmptyElement } from '../common/emptyElement'
import { statLogsOfPlan, getAllSuitesOfPlan } from '../../source/getData'
import { NotifyType } from '../../common/enums'
import { notify } from '../../source/notify'
import { useWatchWsNotify } from '../common/useWatchWsNotify'
import { usePlanFilter } from '../plan/usePlanFilter'
import { Input } from '../common/Input'
import { EnvSelector } from '../common/envSelector'
import { WsNotifyType } from '../../consts/wsNotifyType'
import { ColHeader } from '../common/colHeader'
import { getPlanEnvName } from '../../source/getPlanEnvName'
import { doGetAllStepsOfSuiteInPlan } from '../../source/doGetAllStepsOfSuiteInPlan'
import { withSignal } from '../../common/withSignal';

const maStateToProps = state => {
  return {
    activePlan: getProgressActivePlanSelector(state),
    allPlans: getCommonAllPlansSelector(state),
    forceReloadLogsIndex: getProgressForceReloadLogsSelector(state)
  }
}

const mapDispatchToProps = dispatch => {
  return {
    setActivePlan: plan => dispatch(genProgressSetActivePlan(plan)),
    setActivePlanSuites: suites => dispatch(genProgressSetActivePlanSuites(suites)),
    setActivePlanLogs: logs => dispatch(genProgressSetActivePlanLogStat(logs)),
    forceReloadLogs: () => dispatch(genProgressForceReloadActiveSuiteLogs())
  }
}

export const ProgressPlanList = connect(maStateToProps, mapDispatchToProps)((props) => {
  const { activePlan, setActivePlan, setActivePlanSuites, allPlans, setActivePlanLogs,
    forceReloadLogsIndex, forceReloadLogs } = props
  const { id: activePlanId } = activePlan

  useEffect(() => { allPlans.length && setActivePlan(allPlans[0]) }, [allPlans])
  useEffect(() => {
    return withSignal(signal => {
      if (activePlanId) {
        getAllSuitesOfPlan(activePlanId, { signal })
          .then(suites => {
            setActivePlanSuites(suites)
            if (suites.length) {
              doGetAllStepsOfSuiteInPlan({ planId: activePlanId, suiteId: suites[0].id }, { signal })
            }
          }).catch(err => {
            notify(NotifyType.error, err)
          })

      } else {
        setActivePlanSuites([])
      }
    })
  }, [activePlanId])
  useEffect(() => {
    return withSignal(signal => {
      if (activePlanId) {
        statLogsOfPlan(activePlanId, { signal })
          .then(data => setActivePlanLogs(data))
          .catch(err => notify(NotifyType.error, err))
      } else {
        setActivePlanLogs([])
      }
    })
  }, [activePlanId, forceReloadLogsIndex])

  useWatchWsNotify(WsNotifyType.add_log.type, forceReloadLogs)

  const getTitle = useCallback(item => item.title, [])
  const getEnv = useCallback(item => getPlanEnvName(item), [])

  const { filter, onChangeFilterEnv, onChangeFilterTitle, visiblePlans } = usePlanFilter({ dataSource: allPlans })

  return (
    <React.Fragment>
      <ColHeader title='已运行任务：' />
      <div>
        <Input className='width_130px' placeholder='筛选标题' value={filter.title} onChange={onChangeFilterTitle} readOnly={false} />
        <EnvSelector showNoLimitItem={true} placeholder='筛选基准环境' envName={filter.env} onSelectItem={onChangeFilterEnv} readOnly={false} />
      </div>
      {visiblePlans.length
        ? <SingleSelectableList activeValue={activePlanId} dataSource={visiblePlans}
          getItemValue={item => item.id} getItemTitle={getTitle} getItemTitle2={getEnv}
          onSelectItem={setActivePlan} />
        : <EmptyElement />}
    </React.Fragment>)
})